<template>
  <div>
    <el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" width="320px">
      <ul class="reward-list">
        <li v-for="(item,index) in list" :key="index">
          <span :class="['reward-item', {on: money===item}]" @click="moneyChange(item)"><span class="icon-coin" :class="{'icon-coin-white': money===item, }"></span>{{parseFloat(item)}}</span>
        </li>
      </ul>
      <div class="reward-other">
        <div class="reward-input">
          <input v-model.number="selectTable.money" />
        </div>
        <div class="reward-button">
          <span class="reward-item on" @click="next('formValidate')">打赏</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.reward-other {
  display: flex;
  margin: 0 -10px;
  & > div {
    padding: 8px 10px;
    &.reward-input {
      flex: 1;
      input{
        border: 1px solid #dcdee2;
        border-radius: 3px;
        padding: 7px 8px;
      }
    }
    &.reward-button {
      width: 33%;
    }
  }
}
.reward-list {
  margin: -20px -10px 0 -10px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 33.33%;
    padding: 8px 10px;
    box-sizing: border-box;
  }
}
.reward-item {
  display: block;
  text-align: center;
  line-height: 30px;
  border-radius: 15px;
  border: 1px solid #ed4014;
  cursor: pointer;
  &.on {
    background: #ed4014;
    color: #fff;
  }
}
</style>

<script>
export default {
  components: {
  },
  data () {
    return {
      list: [10, 20, 50, 66, 88, 100],
      money: 10,
      show: true,
      selectTable: {
        money: null
      }
    }
  },
  watch: {
    show () {
      this.$emit('close')
    },
    'selectTable.money' (newVal) {
      this.money = newVal || 10
    }
  },
  computed: {
    title () {
      return '打赏'
    }
  },
  methods: {
    moneyChange (item) {
      this.money = item
      this.selectTable.money = null
    },
    next (formName) {
      if (this.selectTable.money !== null) {
        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(this.selectTable.money)) {
          this.$emit('next', this.money)
        } else {
          window.layui.layer.msg('请输入大于0的打赏金额')
        }
      } else {
        this.$emit('next', this.money)
      }
    }
  }
}
</script>
